<template>
  <div class="wodedingdan">
    <head_>
      <h1 style="width: 200px">我的订单</h1>
    </head_>
    <div class="dingdan_list">
      <ul v-for="(item, index) in list" :key="item.id" @click="go_detail(index)">
        <li>
          <img src="../../assets/dingdanxinxi/car.jpg" alt />
        </li>
        <li>
          <p>
            <span v-text="item.titl"></span>
            <span>订单详情 ></span>
          </p>
          <p>日租：{{ item.time }}天</p>
          <p>租车日期：{{ item.day }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { myOrder } from "@/request/home/home_http";
import { queryByMemberId } from "../../request/userinfo/userinfo";
import head_ from "./header";
export default {
  props: {},
  data() {
    return {
      list: [],
      childlist: null,
    };
  },
  methods: {
    go_detail(index) {
      this.$router.push(`/xiangqing1/${JSON.stringify(this.childlist[index])}`);
    },
  },
  components: {
    head_,
  },
  mounted() {
    queryByMemberId({ memberId: this.$store.state.user.id }).then((res) => {
      if (res.code == 200) {
        this.$toast.fail("成功");
        this.childlist = res.data;
        let list1 = Array.from(res.data);
        list1.forEach((item) => {
          let start = new Date(item.startTime);
          let end = new Date(item.endTime);
          let date = `${start.getFullYear()}年${start.getMonth() + 1
            }月${start.getDate()}日`;
          this.list.push({
            titl: item.carName,
            id: item.id,
            time: Math.ceil((end - start) / 1000 / 60 / 60 / 24),
            day: date,
          });
        });
        console.log(res)
      } else {
        alert(res.message);
      }
    });
    // this.axios({
    //   url: "http://localhost:14966/order/queryById?id=" + this.$store.state.user.id,
    //   method: "get",
    //   data: {
    //   },
    //   headers: {
    //     "token": window.localStorage.getItem("token"),
    //     "Content-Type": "application/json;charset=UTF-8",
    //   },
    // }).then((res) => {
    //   console.log(res)
    //   this.childlist = res.data.data.order;
    //   // //用Array.from（）方法转换为数组，并用list变量接收
    //   let list1 = Array.from(res.data.data.order);
    //   list1.forEach((item) => {
    //     let start = new Date(item.startTime);
    //     let end = new Date(item.endTime);
    //     let date = `${start.getFullYear()}年${start.getMonth() + 1
    //       }月${start.getDate()}日`;
    //     this.list.push({
    //       titl: item.carName,
    //       id: item.id,
    //       time: Math.ceil((end - start) / 1000 / 60 / 60 / 24),
    //       day: date,
    //     });
    //   });
    // });
  },
};
</script>

<style scoped lang="less">
.wodedingdan {
  width: 100%;
  height: 100%;
  font-size: 0;

  .dingdan_list {
    width: 100%;
    height: 100%;
    background-color: #eeeeee;
    padding: 0.1rem 0;

    ul {
      width: 95%;
      height: 1.8rem;
      background: white;
      margin: 0.2rem auto;
      border-radius: 0.08rem;
      display: flex;
      align-items: center;

      li {
        height: 90%;
      }

      li:nth-child(1) {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 2.2rem;
          height: 1.3rem;
          margin-left: 0.1rem;
        }
      }

      li:nth-child(2) {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        p {
          padding: 0 0.21rem;
        }

        p:nth-child(1) {
          display: flex;
          justify-content: space-between;

          span:nth-child(1) {
            font-weight: 600;
            font-size: 0.28rem;
          }

          span:nth-child(2) {
            color: #999;
            font-size: 0.24rem;
          }
        }

        p:nth-child(2),
        p:nth-child(3) {
          font-size: 0.23rem;
          color: #666;
        }
      }
    }
  }
}
</style>
